@import '../../scss/var';

.ui-avatar {
  position: relative;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.14em;
  padding: 0;
  color: var(--text-a);
  background-color: var(--ui-BG-3);
  white-space: nowrap;
  width: 64rpx;
  height: 64rpx;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  font-size: 22rpx;
  border-radius: $radius;

  &::after {
    border-radius: calc(#{$radius} * 2);
  }

  &.round::after {
    border-radius: $round-pill;
  }

  &.sm {
    width: 48rpx;
    height: 48rpx;
    font-size: 16rpx;
  }

  &.lg {
    width: 80rpx;
    height: 80rpx;
    font-size: 28rpx;
  }

  &.xl {
    width: 96rpx;
    height: 96rpx;
    font-size: 34rpx;
  }

  &.xxl {
    width: 112rpx;
    height: 112rpx;
    font-size: 40rpx;
  }

  &.sl {
    width: 128rpx;
    height: 128rpx;
    font-size: 46rpx;
  }

  &.ellipse {
    mask-image: url();
    mask-size: cover;
  }

  .avatar-sm-text {
    font-size: 0.8em;
  }

  .ui-avatar-image {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .view,
  .text {
    position: relative;
    z-index: 2;
  }

  .ui-avatar-icon {
    font-size: 150%;
  }

  &.stack {
    margin-left: -1em;
    background-color: inherit;
    z-index: 1;

    &.isFirstChild {
      margin-left: 0px;
    }

    &.reverse {
      margin: 0 -1em 0 0.14em;
    }

    &::after {
      content: '';
      background-color: inherit;
      transform: scale(1.1);
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    &::after {
      border-radius: #{$radius};
    }

    &.round::after {
      border-radius: $round-pill;
    }

    &.ellipse::after {
      border-radius: 0px;
      mask-image: url();
      mask-size: cover;
    }
  }
}

.ui-avatar-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  padding: 1px;

  .ui-avatar-image {
    position: relative;
    float: left;
    border-radius: #{$radius};
    margin: 1px;
    display: block;
  }

  /*1个*/
  &.nth-1 .ui-avatar-image {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }

  /*2个*/
  &.nth-2 .ui-avatar-image {
    width: calc((100% - 5px) / 2);
    height: calc((100% - 5px) / 2);
  }

  &.nth-2 .ui-avatar-image:last-child {
    margin-left: calc(50% + 1px);
  }

  /*3个*/
  &.nth-3 .ui-avatar-image {
    width: calc((100% - 5px) / 2);
    height: calc((100% - 5px) / 2);
    float: left;
  }

  &.nth-3 .ui-avatar-image:first-child {
    margin-left: calc(25% + 1px);
  }

  /*4个*/
  &.nth-4 .ui-avatar-image {
    width: calc(50% - 2px);
    height: calc(50% - 2px);
    float: left;
  }

  /*5/6个*/
  &.nth-5 .ui-avatar-image,
  &.nth-6 .ui-avatar-image {
    width: calc((100% - 6px) / 3);
    height: calc((100% - 6px) / 3);
    border-radius: #{$radius - 2};
  }

  &.nth-5 .ui-avatar-image:first-child,
  &.nth-6 .ui-avatar-image:first-child {
    width: calc((100% - 6px) / 3 * 2 + 2px);
    height: calc((100% - 6px) / 3 * 2 + 2px);
    border-radius: #{$radius};
  }

  &.nth-5 .ui-avatar-image:last-child {
    top: -33.33%;
  }

  &.nth-6 .ui-avatar-image:last-child {
    top: -66.66%;
    left: 66.66%;
  }

  // &.nth-5 .ui-avatar-image:nth-last-child(1),&.nth-5 .ui-avatar-image:nth-last-child(2),&.nth-5 .ui-avatar-image:nth-last-child(3),
  // &.nth-6 .ui-avatar-image:nth-last-child(1),&.nth-6 .ui-avatar-image:nth-last-child(2),&.nth-6 .ui-avatar-image:nth-last-child(3),{
  // 	margin-top: 2px;
  // }
  /* 7个 8个 9个 */
  &.nth-7 .ui-avatar-image:first-child {
    margin-left: calc(100% / 3 + 1px);
    margin-right: calc(100% / 3 + 1px);
  }

  &.nth-8 .ui-avatar-image:first-child {
    margin-left: calc(100% / 3 / 2 + 1px);
  }

  &.nth-7,
  &.nth-8,
  &.nth-9 {
    display: flex;
    flex-wrap: wrap;

    .ui-avatar-image {
      width: calc((100% - 6px) / 3);
      height: calc((100% - 6px) / 3);
      border-radius: #{$radius - 2};
    }
  }
}